extends ./layouts/default.pug
block title 
  title 电影首页
block content
  style.
    header {
      position: -webkit-sticky;
      position: sticky;
      top:0;
      background: #F79300;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      z-index: 500;
    }
    .sidebar-link {
      display: block;
      padding: .25rem 1.5rem;
      font-weight: 500;
      color: (0,0,0,.65)
    }
    .sidebar .nav > li > a {
      display: block;
      padding: .25rem 1.5rem;
      font-size: 90%;
      color: rgba(0,0,0,.65)
    }
    .sidebar-item.active > .sidebar-inner{
      display: block;
    }
    .card {
      margin-bottom: 1.5rem;
    }
    .card img {
      width: 100%;
    }
    .switcher {
      position: relative;
      padding: 1rem 15px;
      margin-right: -15px;
      margin-left: -15px;
      border-bottom: 1px solid rgba(0,0,0, .05)
    }
    .nav-item{
      list-style: none;
      padding: 0 10px;
    }
    .card{
      box-shadow: 3px 3px 3px #ccc;
    }
  include ./includes/header
  .container-fluid
    .col-12.col-md-1.col-xl-1.sidebar
      .cat-links
        .sidebar-item.active
          a.sidebar-link(href='/link1') 2018 年
          a.sidebar-link(href='/link1') 2019 年
          a.sidebar-link(href='/link1') 2020 年
          a.sidebar-link(href='/link1') 2021 年
          a.sidebar-link(href='/link1') 2022 年
          a.sidebar-link(href='/link1') 2023 年
          a.sidebar-link(href='/link1') 2024 年
          a.sidebar-link(href='/link1') 2025 年
    .col-12.col-md-9.col-xl-9.py-md-3.pl-md-5.content 
      .row  
        .col-md-6
          .card 
            img.card-img-top(src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565762557847&di=e4ab91332f26a22a28eef181db9322c7&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw960h593%2F20180312%2F0246-fyscsmu5279487.jpg", data-video="http://video.iblack.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4")
            .card-body  
              h4.card-title 这是电影标题
              p.card-desc 这是电影描述
            .card-footer
              small.text-muted 1 天前更新
        .col-md-6
          .card 
            img.card-img-top(src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565762557847&di=e4ab91332f26a22a28eef181db9322c7&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw960h593%2F20180312%2F0246-fyscsmu5279487.jpg", data-video="http://video.iblack.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4")
            .card-body  
              h4.card-title 这是电影标题
              p.card-desc 这是电影描述
            .card-footer
              small.text-muted 1 天前更新
      .row  
        .col-md-6
          .card 
            img.card-img-top(src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565762557847&di=e4ab91332f26a22a28eef181db9322c7&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw960h593%2F20180312%2F0246-fyscsmu5279487.jpg", data-video="http://video.iblack.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4")
            .card-body  
              h4.card-title 这是电影标题
              p.card-desc 这是电影描述
            .card-footer
              small.text-muted 1 天前更新
        .col-md-6
          .card 
            img.card-img-top(src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565762557847&di=e4ab91332f26a22a28eef181db9322c7&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw960h593%2F20180312%2F0246-fyscsmu5279487.jpg", data-video="http://video.iblack.com/tgGnZRn3W4Ajw6PGcA_9Z.mp4")
            .card-body  
              h4.card-title 这是电影标题
              p.card-desc 这是电影描述
            .card-footer
              small.text-muted 1 天前更新
  #myModal.modal.fade.bd-example-model-lg(tabindex="-1", role="dialog",aria-labelledby="myLargeModalLabel",aria-hidden="true")
  .modal-dialog.modal-lg
    #videoModal.modal-content

  script(src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js")
  script.
    var player = null
    $(document).ready(function (){
      $('#myModal').on('hidden.bs.modal', function(e){
        if (player && player.pause) player.pause()
      })
      $('.card-img-top').click(function (e) {
        var video = $(this).data('video')
        var image = $(this).attr('src')
        $('#myModal').modal('show')
        if (!player) {
          player = new DPlayer({
            container: document.getElementById('videoModal'),
            screenshot: true,
            video: {
              url: video,
              pic: image, 
              thumbnails: image
            }
          })
        } else {
          player.switchVideo({
            url:video,
            pic: image,
            type: 'auto'
          })
        }
      })
    })